<template>
    <view class="header" :style="{
        'background-image':`url(http://localhost:8081/common/download?name=${shopInfo.bgImg})`
    }">
        <view class="header-card">
            <view class="flex flex-row ai-center">
                <image class="header-card-avator"
                    :src="'http://localhost:8081/common/download?name=' + shopInfo.logoImg" />
                <view class="flex flex-col ml-10 flex-1">
                    <view class="flex ai-center">
                        <text class="txt-30 txt-black-50">{{ shopInfo.name }}</text>
                        <view class="flex ai-center ml-30">
                            <text class="iconfont icon-B-pingfen txt-yellow-225 txt-30"></text>
                            <text class="ml-6 txt-black-153 txt-24">评分：{{ shopInfo.score }}</text>
                        </view>
                    </view>
                    <view class="flex ai-center mt-10 jc-between">
                        <view class="flex ai-center">
                            <text class="iconfont icon-xiaoliang txt-yellow-225 txt-26"></text>
                            <text class="ml-6 txt-black-153 txt-24">月销量：1000+</text>
                        </view>
                        <view class="flex ai-center">
                            <text class="iconfont icon-dizhi txt-yellow-225 txt-28"></text>
                            <text class="ml-6 txt-black-153 txt-24">地址：{{ shopInfo.address }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="line"></view>
            <view class="txt-black-153 txt-22">
                简介：{{ shopInfo.description }}
            </view>
        </view>
    </view>
</template>

<script setup>
defineProps({
    shopInfo: {
        type: Object,
        default: () => { }
    }
})
</script>

<style lang="scss" scoped>
.header {
    position: relative;
    width: 100%;
    height: 305rpx;
    background-color: 100% 100%;

    &-card {
        position: absolute;
        left: 5%;
        bottom: -60rpx;
        width: 90%;
        display: flex;
        flex-direction: column;
        background-color: white;
        border-radius: 10rpx;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 4rpx 4rpx 12rpx rgb(231, 227, 227);

        &-avator {
            width: 56rpx;
            height: 56rpx;
        }

    }

    .line {
        width: 100%;
        height: 2rpx;
        background: rgb(235, 235, 235);
        margin: 16rpx 0 10rpx;
    }
}
</style>